<template>
	<div class="container">
		<h1>报名进度</h1>
		<br /><br /><br />
		<div class="demo-progress">
			<el-space style="width: 13%"
				>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提交信息:
				<el-progress v-if="state === 0" status="exception" />
				<el-progress v-else status="success" />
			</el-space>
			<el-space style="width: 13%"
				>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;老师审核:
				<el-progress v-if="state === 1 || state === 0" status="warning" />
				<el-progress v-else-if="state === -1" status="exception" />
				<el-progress v-else status="success" />
			</el-space>
			<el-space style="width: 13%"
				>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;官网报名:
				<el-progress v-if="state === 3" status="success" />
				<el-progress v-else status="exception" />
			</el-space>
		</div>
		<br /><br />
		<div class="demo-progress">
			<el-space style="width: 10%">
				<el-progress
					v-if="state === 0"
					type="circle"
					percentage="30%"
					status="exception"
					><span>未提交</span>
				</el-progress>
				<el-progress v-else type="circle" percentage="100%" status="success"
					><span>已提交</span></el-progress
				> </el-space
			>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<el-space style="width: 10%">
				<el-progress
					v-if="state === 0"
					type="circle"
					percentage="30%"
					status="exception"
					><span>等待提交</span>
				</el-progress>
				<el-progress
					v-else-if="state === 1"
					type="circle"
					percentage="60%"
					status="warning"
					><span>等待审核</span>
				</el-progress>
				<el-progress
					v-else-if="state === -1"
					type="circle"
					percentage="30%"
					status="exception"
					><span>未通过</span>
				</el-progress>
				<el-progress v-else type="circle" percentage="100%" status="success"
					><span>通过</span></el-progress
				> </el-space
			>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<el-space style="width: 10%">
				<el-progress
					v-if="state === 3"
					type="circle"
					percentage="100%"
					status="success"
					><span>报名成功</span>
				</el-progress>
				<el-progress v-else type="circle" percentage="30%" status="exception"
					><span>等待报名</span>
				</el-progress>
			</el-space>
		</div>
		<div class="btn-group">
			<el-button type="success" @click="tzBm">前往报名</el-button>
			<el-button type="danger" @click="xGPass">修改密码</el-button>
		</div>
	</div>
</template>
<script>
export default {
	name: "UserState",
	data() {
		return {
			state: 0,
		};
	},
	methods: {
		refreshData() {
			let requestBody = new URLSearchParams();
			requestBody.append("studentID", this.$store.getters.user.studentID);
			fetch(`${this.$store.getters.point}/Student/preSignUp/getState/`, {
				method: "POST",
				mode: "cors",
				body: requestBody,
			})
				.then((response) => response.text())
				.then((result) => {
					let data = JSON.parse(result).data;
					this.state = parseInt(data);
				});
		},
		tzBm() {
			this.$router.push("/bm");
		},
		xGPass() {
			this.$router.push("/changePass");
		},
	},
	mounted() {
		this.refreshData();
	},
	computed: {
		isAdmin() {
			return this.$store.getters.user?.isAdmin;
		},
	},
};
</script>
<style scoped>
.btn-group {
	margin-top: 60px;
}
</style>
